import React from 'react';
import { redux, utils } from '@ohif/core';
import store from '../../store';
import { Button, Modal } from 'antd';
import { ShareModal, AboutModal } from '@ohif/ui';
import qs from 'querystring';

import './commandsModule.styl';

const commandsModule = ({ commandsManager }) => {
  const { setCommons } = redux.actions;

  const actions = {
    showShare: ({ appConfig, t }) => {
      const { routerBasename, xhrTokenValue } = appConfig;
      const { href, search } = window.location;
      let url = href;
      const query = qs.parse(search.slice(1));
      if (!query.token) {
        url += `?token=${xhrTokenValue}`;
      }

      const config = {
        title: t('Scan to View'),
        content: (
          <ShareModal
            url={url}
            t={t}
            imageSettings={{
              src: `${routerBasename}assets/share.png`,
              width: 60,
              height: 28,
              excavate: true,
            }}
          />
        ),
        icon: null,
        width: 300,
        closable: true,
        maskClosable: true,
        className: 'share-modal-wrap',
      };
      Modal.info(config);
    },
    setImageSync: ({ sync }) => {
      store.dispatch(setCommons({ imageSync: sync }));
    },
    showPatientInfo: ({ preferences }) => {
      const { showPatientInfo } = preferences.commons;
      store.dispatch(setCommons({ showPatientInfo: !showPatientInfo }));
    },
    showCornerInfo: ({ preferences }) => {
      const { showCornerInfo } = preferences.commons;
      store.dispatch(setCommons({ showCornerInfo: !showCornerInfo }));
    },
    showAnno: ({ preferences }) => {
      const { showAnno } = preferences.commons;
      store.dispatch(setCommons({ showAnno: !showAnno }));
    },
    showRefLine: ({ preferences }) => {
      const { showRefLine } = preferences.commons;
      store.dispatch(setCommons({ showRefLine: !showRefLine }));
    },
    showHelp: () => {},
    showAbout: ({ appConfig, t }) => {
      const { routerBasename } = appConfig;
      const config = {
        title: t('About This Viewer'),
        content: <AboutModal logo={`${routerBasename}/assets/logo.png`} t={t} />,
        icon: null,
        width: 300,
        closable: true,
        maskClosable: true,
        className: 'about-modal-wrap',
      };
      Modal.info(config);
    },
  };

  const definitions = {
    showShare: {
      commandFn: actions.showShare,
      options: {},
    },
    setImageSync: {
      commandFn: actions.setImageSync,
      options: {},
    },
    showPatientInfo: {
      commandFn: actions.showPatientInfo,
      storeContexts: ['preferences'],
      options: {},
    },
    showCornerInfo: {
      commandFn: actions.showCornerInfo,
      storeContexts: ['preferences'],
      options: {},
    },
    showAnno: {
      commandFn: actions.showAnno,
      storeContexts: ['preferences'],
      options: {},
    },
    showRefLine: {
      commandFn: actions.showRefLine,
      storeContexts: ['preferences'],
      options: {},
    },
    showHelp: {
      commandFn: actions.showHelp,
      options: {},
    },
    showAbout: {
      commandFn: actions.showAbout,
      options: {},
    },
  };

  return {
    definitions,
    defaultContext: 'VIEWER',
  };
};

export default commandsModule;
